<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单管理</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .main-container {
            padding: 15px 15px 15px 75px;
            background: #f2f2f2;
            min-height: 100vh;
        }
        .search-box {
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/admin_leftmenu.html'; ?>
    
    <div class="main-container">
        <!-- 搜索区域 -->
        <div class="search-box">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="order_no" placeholder="请输入订单号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">会员卡号</label>
                            <div class="layui-input-block">
                                <input type="text" name="card_no" placeholder="请输入会员卡号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-block">
                                <input type="text" name="date_range" id="dateRange" placeholder="请选择日期范围" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 0;text-align: right;">
                                <button class="layui-btn" lay-submit lay-filter="searchOrder">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格区域 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="orderTable" lay-filter="orderTable"></table>
            </div>
        </div>
    </div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="export">
                <i class="layui-icon layui-icon-export"></i> 导出
            </button>
        </div>
    </script>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="tableBar">
        {{# if(d.status === 1 && d.is_refunded === 0){ }}
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refund">退款</button>
        {{# } }}
        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
    </script>

    <script type="text/html" id="statusTpl">
        {{# if(d.status === 0){ }}
            <span class="layui-badge layui-bg-gray">待支付</span>
        {{# }else if(d.status === 1){ }}
            <span class="layui-badge layui-bg-green">已支付</span>
        {{# }else if(d.status === 2){ }}
            <span class="layui-badge layui-bg-orange">已退款</span>
        {{# }else if(d.status === 5){ }}
            <span class="layui-badge layui-bg-gray">已取消</span>
        {{# }else{ }}
            <span class="layui-badge layui-bg-blue">其他状态</span>
        {{# } }}
    </script>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['table', 'form', 'laydate', 'layer'], function(){
        var table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,$ = layui.$;
        
        // 初始化日期范围选择器
        laydate.render({
            elem: '#dateRange'
            ,type: 'date'
            ,range: true
        });
        
        // 初始化表格
        table.render({
            elem: '#orderTable'
            ,url: '/app/ky_shouyin/admin/order/list'
            ,toolbar: '#tableToolbar'
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'order_no', title: '订单号', width: 180}
                ,{field: 'card_no', title: '会员卡号', width: 120}
                ,{field: 'member_name', title: '会员姓名', width: 100}
                ,{field: 'total_amount', title: '订单金额', width: 100}
                ,{field: 'payment_method', title: '支付方式', width: 100}
                ,{field: 'status', title: '订单状态', width: 100, templet: '#statusTpl'}
                ,{field: 'create_time', title: '创建时间', width: 160}
                ,{fixed: 'right', title: '操作', toolbar: '#tableBar', width: 130}
            ]]
            ,page: true
            ,limit: 20
            ,limits: [20,30,50,100]
            ,skin: 'line'
        });
        
        // 表格工具栏事件
        table.on('toolbar(orderTable)', function(obj){
            if(obj.event === 'export') {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                if(data.length === 0) {
                    layer.msg('请选择要导出的数据');
                    return;
                }
                // 调用导出接口
                window.location.href = '/app/ky_shouyin/admin/order/export?ids=' + data.map(item => item.id).join(',');
            }
        });
        
        // 表格行工具事件
        table.on('tool(orderTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail') {
                layer.open({
                    type: 2
                    ,title: '订单详情'
                    ,content: '/app/ky_shouyin/admin/order/detail?id=' + data.id
                    ,area: ['80%', '90%']
                    ,maxmin: true
                });
            } else if(obj.event === 'refund') {
                layer.confirm('确定要对此订单进行退款操作吗？', {
                    btn: ['确定','取消']
                }, function(){
                    $.post('/app/ky_shouyin/admin/order/refund', {
                        id: data.id
                    }, function(res){
                        if(res.code === 0){
                            layer.msg('退款成功');
                            table.reload('orderTable');
                        } else {
                            layer.msg(res.msg || '退款失败');
                        }
                    });
                });
            }
        });
        
        // 搜索表单提交
        form.on('submit(searchOrder)', function(data){
            table.reload('orderTable', {
                where: data.field
                ,page: {
                    curr: 1
                }
            });
            return false;
        });
    });
    </script>
</body>
</html> 